<!-- 搜索页 -->
<template>
	<view>
		<view class="search" id='search' >
			<!-- 搜索框 -->
			<view class="search_box">
				<view class="input_box">
					<view class="input">
						<image :src="search"></image>
						<input :focus="focus" hold-keyboard="true" confirm-type="search" @confirm="confirm" type="text" v-model="input_value"
						 placeholder="请输入搜索内容" />
					</view>
					<view class="del" v-if="input_value.length > 0" @click="close">
						<image src="/static/image/x.png"></image>
					</view>
				</view>
			</view>
			<!-- 热门搜索、热门分类、搜索历史 -->
			<view class="content" v-if="!show_result">
				<search-label ref="search_w"  :labelList="labelList" @fun="fun" @selectLabel="selectLabel" :secharList="secharList"></search-label>
			</view>
			<!-- 搜索结果 -->
			<view class="result" v-if="show_result">
				<dropdown-menu ref="dropdownMenu" :top="top" @selectOption="selectOption"></dropdown-menu>
				<view class="search_list" style="padding-top: 112rpx;">
					<view class="item" v-if="show_index === 0 || show_index === 1" >
						<text v-if="searchGood.length">商品</text>
						<goods-list :goods_data="searchGood" @getId="getId" ref="goodsList"></goods-list>
						<view class="getMore" @click="getMore" v-if="searchGood.length > 6">
							<tap-more :isLoad="isLoad" :isNone="isNone" :isName="isName"></tap-more>
						</view>
					</view>
					<view class="item" v-if="show_index === 0 || show_index === 2">
						<text v-if="searchSeller.length">商家</text>
						<notice-list :notice="searchSeller"></notice-list>
						<view class="getMore" @click="getMoreSeller" v-if="searchSeller.length > 1" style="padding-top: 50rpx;">
							<tap-more :isLoad="isLoad" :isNone="isNone" :isName="isName"></tap-more>
						</view>
					</view>
				</view>
			</view>
		</view>
		<empty :null_data="null_data" v-if="!labelList[0].label.length"></empty>
		<view class="" v-if="show_result">
			<empty :null_data="null_good" v-if="!searchGood.length && !searchSeller.length"></empty>
		</view>
	</view>
</template>
<script>
    import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
	import searchLabel from "@/pages/search/components/search-label.vue";
	import dropdownMenu from "@/pages/search/components/dropdown-menu.vue";
	export default {
		components: {
			searchLabel, dropdownMenu
		},
		data() {
			return {
				// 搜索空状态
				null_data: {
				 null_img: this.imgUrl + 'nocollect.png',
				 text: '暂无搜索内容~'
				},
				// 商品空状态
				null_good: {
				 null_img: this.imgUrl + 'nocollect.png',
				 text: '暂无商品~'
				},
				focus: true,				// 是否自动聚焦
				input_value: '',			// 搜索框输入的值
				labelList: [{               // 搜索的标签
					name: '搜索历史',
					fun: '清空',
					label: []
				}],
				show_result: false,			// 是否展示搜索结果
				top: 0,						// 下拉菜单距离顶部距离
                searchTop:0,                 // 整体页面距离顶部距离
				show_index: 0,				// 显示列表为全部还是其他
				show_sort: 0,               // 综合排序
				title: ['商品','商户'],		// 搜索到的标题	
				statusBarHeight: '',        // 状态栏高度
				search: this.imgUrl + 'search.png', 
				obj: {                      // 商品
					page: 1,
					pagesize: 10,
					category_id: '',
					orderby_type: 'number',
					orderby: 'desc',
					lat: 24.881627,
					lng: 118.628881,
					member_id: 1,
					searchText: ''
				},
				searchGood:[],              // 搜索商家
				searchSeller: [],           // 搜索商品 
				secharList: []              ,// 历史搜索列表
				isLoad: false,
				isNone:false,
				isName: false,
				num: 0 , // 监听下拉菜单标识
			};
		},
		watch: {
			input_value(val) {
				if(!val){
					this.show_result = false
				}
			},
			// 监听下拉下标
			num(newVal, oldVal) {
				if (newVal != '00') {
					if (newVal != oldVal) {
						this.clear();
						this.getApi();
					}
				}
			},
		},
		computed: {
            ...mapState({
				goods: state => state.init.goods,						// 商品
				sellers: state => state.init.sellers,  					// 商家
				systemInfo: state => state.init.systemInfo, 			// 设备信息
				Location: state => state.user.Location, 				// 经纬度
            })
		},
		methods: {
			// 获取商品id
			getId(e) {
				this.$store.dispatch('goods/get_detail', e)
			},
			// 加载更多
			getMore() {
				if(this.isName) return;
				this.isNone =true;
				this.isLoad = true;
				setTimeout(()=> {
					this.obj.page++
					this.$api('giftpage',this.obj).then( res => {
						this.searchGood = res.data.data
						if(!res.data.data.length) {
							this.isLoad = false;
							this.isName =true
						} else {
							this.isLoad = false;
							this.isNone = false;
						}
					})
				},1000)
			},
			// 加载更多
			getMoreSeller() {
				if(this.isName) return;
				this.isNone =true;
				this.isLoad = true;
				setTimeout(()=> {
					this.obj.page++
					this.$api('shoppage',this.obj).then( res => {
						this.searchSeller = res.data.data
						if(!res.data.data.length) {
							this.isLoad = false;
							this.isName =true
						} else {
							this.isLoad = false;
							this.isNone = false;
						}
					})
				},1000)
			},
			// api请求
			clear() {
				this.$refs.goodsList.clear();
			},
			getApi() {
				this.obj.searchText = this.input_value
				// 搜索商品
				this.$api('giftpage',this.obj).then( res => {
					let arr = res
					this.searchGood = arr.data.data
				})
				// 搜索商家
				this.$api('shoppage',this.obj).then( res => {
					let arr = res
					this.searchSeller = arr.data.data
				})
			},
			// 软键盘点击搜索操作
			confirm() {
				this.getApi();
				this.show_result = true
			},
			// 点击展开或者清空功能
			fun(data) {
				let {item, index} = data;
				switch(item.fun){
					case '展开':
						this.$set( this.labelList[index],'fun', '收起')
						this.$set( this.labelList[index],'height', '100%')
						break;
					case '收起':
						this.$set( this.labelList[index],'height', undefined)
						this.$set( this.labelList[index],'fun', '展开')
						break;
					case '清空':
						this.labelList[index].label =[];
						break;
					default:
						break;
				}
			},
			// 选择标签项
			selectLabel(value) {
				this.input_value = value
				this.getApi();
				this.focus = false
				this.show_result = true
			},
			selectOption(active, index) {
				let a = index.toString();
				let b = active.toString();
				this.num = a + b;
				if(active === 0) {
					this.show_index = index
				}
				if(index == 1 && active == 0) {
					this.obj.orderby_type = 'number'
					this.obj.orderby = 'desc'
					this.obj.pagesize = 8
				}
				if(index == 0 && active == 1) {
					this.obj.orderby_type = 'distance'
					this.obj.orderby = 'desc'
				}
				if(active == 1 && index == 1) {
					this.obj.orderby_type = 'number'
					this.obj.orderby = 'asc'
				}
				if(active == 1 && index == 2) {
					this.obj.orderby_type = 'distance'
					this.obj.orderby = 'asc'
				}
			},
			searchHistoy() {
				// 历史搜索
				this.$api('basesearchHistory',{
					type: 'gift',
					limit_num: 20
				}).then( res => {
					let arr = res
					this.labelList[0].label = arr.data
				})
			},
			close() {
				this.input_value = ''
				this.searchHistoy();
			}
		},
		beforeMount() {},
		mounted() {
			this.obj.lat = Number(this.Location.latitude)
			this.obj.lng = Number(this.Location.longitude)
			this.systemInfo.statusBarHeight = this.statusBarHeight
			this.searchHistoy();
		},
	};
</script>
<style scoped lang='scss'>
	@import "./index.scss";
</style>